<template>
  <el-checkbox-group
    :v-model="widget.options.modelValue"
    :size="widget.options.size"
    :disabled="widget.options.disabled"
    :min="widget.options.min"
    :max="widget.options.max"
    :label="widget.options.label"
    :text-color="widget.options.textColor"
    :fill="widget.options.fill"
    :tag="widget.options.tag"
    :validate-event="widget.options.validateEvent"
    @click.stop="selectField"
  >
    <slot></slot>
    <template v-for="(element) in widget.widgetList" :key="element.id">
      <component :is="FieldComs[`${element.type}Widget`]" :widget="element">
      <!-- <checkboxWidget :widget="element">
        <template v-if="selectedId == element.id">
          <el-button-group class="controlGroupCom">
            <el-text type="primary">{{ element.type }}</el-text>
            <el-button
              :icon="Delete"
              @click.stop="onClickDelete(widget.widgetList, index)"
              >33</el-button
            >
          </el-button-group>
        </template>
      </checkboxWidget> -->
      </component>
    </template>
    <!-- {{ widget.options.label }} -->
  </el-checkbox-group>
</template>

<script setup>
import {
  selectedId,
  onClickDelete,
} from "@/views/pageDesign/components/globalVariable";
import { assignmentWidget } from "@/views/pageDesign/components/globalVariable";
import FieldComs from "@/views/pageDesign/components/centralRegion/index.js";
import checkboxWidget from "./checkboxWidget.vue";
import { Delete } from "@element-plus/icons-vue";

defineOptions({
  name: "checkboxGroupWidget",
  inheritAttrs: false,
});

let $props = defineProps({
  widget: {
    type: Object,
    required: true,
  },
});

let selectField = () => {
  assignmentWidget($props.widget);
};
</script>

<style lang="scss" scoped>
.el-checkbox-group{
  padding: 15px;
  border: 1px dashed rgba(170, 170, 170, 0.75);
}
</style>
